<!--  -->
<template>
  <div>
        <Card>
            <div slot="title" >
                <Button v-if="btnp.yjfzu_xzfz" @click="handleClickAddForm" class="zh-hollow" type="primary" icon="plus-round">新增分组</Button>
            </div>
            <Form :model="formItem" :label-width="70">
                <Row :gutter="10" type="flex"  align="middle"  >
                <Col span="8">
                    <FormItem label="分组名称">
                        <Input v-model="formItem.title" placeholder="分组名称" clearable></Input>
                    </FormItem>
                </Col>
                <Col span="8" v-if="user_type!='01'">
                    <FormItem label="客户">
                        <Select v-model="formItem.customer_uuid" filterable>
                            <Option  v-for="item in moreCustomerList" :value="item.uuid" :key="item.uuid">{{ item.name }}</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="群组成员">
                        <Input v-model="formItem.member_mobile" placeholder="成员手机号" clearable></Input>
                    </FormItem>
                </Col>
                <!-- </Row>
                <Row :gutter="10" type="flex" > -->
                <Col span="12">
                    <FormItem label="新增时间">
                        <DatePicker v-model="timeRange" format="yyyy-MM-dd HH:mm" type="datetimerange" placement="bottom-end" placeholder="请选择开始和结束时间"></DatePicker>
                    </FormItem>
                </Col>
                </Row>

                <Row  >
                <Col span="8" offset="16"  style="text-align:right;">
                    <Button @click='searchtable' class="zh-hollow" type="primary" icon="ios-search-strong">搜索</Button>
                </Col>
                
                </Row>
            </Form>
        </Card>
        <Card style="margin-top:10px;" :padding="0">
            <Table :loading="loading" border :columns="columns" :data="data"></Table>
            <Page :current.sync="formItem.pageNumber" :total="total" show-total show-sizer @on-change="pageChange" @on-page-size-change="pageSizeChange"></Page>
        </Card>
        <Modal title="应急分组详情" v-model="modal_group_detail" class="zh-modal-form no_footer_modal">
            <Form :label-width="80" style="padding:15px 30px;">
                <FormItem label="客户：">
                    {{groupInfo.customer_name}}
                </FormItem>
                <FormItem label="分组名称：">
                    {{groupInfo.name}}
                </FormItem>
                <FormItem label="新增时间：">
                    {{groupInfo.time}}
                </FormItem>
                <FormItem label="群组成员：">
                    <p style="color:#2d8cf0" v-if="!!groupInfo.bankMember&&groupInfo.bankMember.length>0">
                        <span style="display:inline-block;marginRight:10px;" v-for="(item ,index) in groupInfo.bankMember" :key="index+item.mobile">
                            {{item.user_nick}}({{item.mobile}})
                        </span>
                    </p>
                    <p v-if="!!groupInfo.serMember&&groupInfo.serMember.length>0">
                        <span style="display:inline-block;marginRight:10xp;" v-for="(item ,index) in groupInfo.serMember" :key="index+item.mobile">
                            {{item.user_nick}}({{item.mobile}})
                        </span>                        
                    </p>
                </FormItem>                                                
            </Form>
        </Modal>
        <Modal v-model="modal_group_info" :mask-closable="false" :title="groupTitle" :loading="saveloading" @on-ok="save" ok-text="保存" cancel-text="放弃操作" class="zh-modal-form">
            <Form :model="groupInfo" :label-width="60" style="padding:15px 30px;">
                <FormItem  label="客户" v-if="user_type!='01'">
                    <Input v-model="groupInfo.customer_name" readonly v-if="groupTitle=='编辑分组信息'"></Input>
                    <Select v-else v-model="groupInfo.customer_uuid"  @on-change="change">
                        <Option  v-for="item in customerList" :value="item.uuid" :key="item.uuid">{{ item.name }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="分组名称">
                    <Input v-model="groupInfo.name" placeholder="分组名称" :maxlength="20"></Input>
                </FormItem>

                <FormItem label="分组成员">
                    <p v-if="groupInfo.customer_uuid.length==''||groupInfo.customer_uuid==undefined">请先选择用户</p>
                    <div v-else @click="modal_transfer=true" style="color:#2d8cf0;cursor:pointer">
                        <p v-if="groupInfo.groupMember.length>0">
                            {{groupInfo.member_names}}
                        </p>
                        <p v-else>选择</p>
                    </div>
                </FormItem>                                                
            </Form>
        </Modal>
        <Modal title="选择人员" width="656" @on-ok="chosepeo" :mask-closable="false"  v-model="modal_transfer" ok-text="确定"  cancel-text="放弃操作" class="zh-modal-form " class-name="vertical-center-modal">
            <Transfer
                :data="transferList"
                :target-keys="targetKeys"
                :render-format="transRender"
                :list-style="transferListStyle"
                @on-change="handleTransferChange"
                :titles="transferTitles"
                filterable
            ></Transfer>
        </Modal> 
  </div>
</template>

<script>
import util from '@/libs/util.js'
import {getemgroupTable,getEmerGroupDetail,getAllPeoByCusUuid} from '@/libs/get.js'
import {deleteEmergroup,saveEmerGroup} from '@/libs/post.js'
export default {
    name:'',
    data () {
        return {
            saveloading:true,
            userUuid:'',
            user_type:'',
            btnp:{},
            btn:{
                yjfzu_xzfz:false,
                yjfzu_ck:false,
                yjfzu_bj:false,
                yjfzu_sc:false,
            },
            transferTitles:['可选','已选中'],
            transferListStyle: {
                width: '300px',
                margin:'0 auto'
                
            },
            transferList:[],
            targetKeys:[],
            modal_transfer:false,
            groupTitle:'',
            groupInfo:{
                uuid:'',
                customer_name:'',
                customer_uuid:'',
                name:'',
                member_uuids:'',
                member_names:'',
                groupMember:[],
                bankMember:[],
                serMember:[],
                time:'',
            },
            modal_group_info:false,
            modal_group_detail:false,
            loading:true,
            total:0,
            timeRange:[],
            formItem:{
                title:'',
                customer_uuid:'',
                member_mobile:'',
                pageNumber:1,
                pageSize:10
            },
            moreCustomerList:[],
            customerList:[],
            columns:[
                {
                    key:'title',
                    title:'分组名称',
                    minWidth:120
                },{
                    key:'partner_name',
                    title:'客户',
                    minWidth:150
                },
                {
                    key:'memberNums',
                    title:'成员人数',
                    minWidth:90,
                    align:'center'
                },{
                    key:'created',
                    title:'新增时间',
                    minWidth:150,
                    align:'center'
                },{
                    key:'action',
                    title:'操作',
                    minWidth:200,
                    align:'center',
                    fixed:'right',
                    render:(h,params)=>{
                        let uuid=params.row.uuid;
                        return h('div',[
                            h('Button',{
                                props:{
                                type:'text',
                                size:'small'
                                },
                                style:{
                                color:'#2D8CF0',
                                display:this.btnp.yjfzu_ck?'inline-block':'none'
                                },
                                on:{
                                click:()=>{
                                   this.modal_group_detail=true;
                                    this.getDetails(uuid);
                                    
                                }
                                }
                            },'查看'), 
                            h('Button',{
                                props:{
                                type:'text',
                                size:'small'
                                },
                                style:{
                                color:'#2D8CF0',
                                display:this.btnp.yjfzu_bj?'inline-block':'none'
                                
                                },
                                on:{
                                click:async ()=>{
                                    this.modal_group_info=true;
                                    this.groupTitle="编辑分组信息";
                                    await this.getDetails(uuid);
                                    await this.getStaff(this.groupInfo.customer_uuid);
                                }
                                }
                            },'编辑'),
                             h('Button',{
                                props:{
                                type:'text',
                                size:'small'
                                },
                                style:{
                                color:'#EA0000',
                                display:this.btnp.yjfzu_sc?'inline-block':'none'
                                },
                                on:{
                                click:()=>{
                                    let config={
                                    title:'删除应急分组',
                                    content:'删除应急分组后，发起应急事件时不能再发送到该分组。',
                                    okText:'删除',
                                    cancelText:'放弃操作',
                                    onOk:()=>{
                                       this.delete(uuid);
                                    }
                                    }
                                    this.$Modal.confirm(config)
                                }
                                }
                            },'删除') 
                        ])
                    }
                }
            ],
            data:[]
        };
    },
    methods:{
        init(){
            let that=this;
            util.isCustomer(this);
            let timer;
			if(that.user_type!=='01'){
				timer=setInterval(()=>{
					if(that.$store.state.user.customer.length>0){
                        that.moreCustomerList=[{name:'全部',uuid:'全部'},...that.$store.state.user.customer];
                        that.customerList=that.$store.state.user.customer;
						clearInterval(timer)	
					}
				},500);
			}
            // setTimeout(()=>{
                
            //     if(this.user_type!=='01'){
            //         that.moreCustomerList=[{name:'全部',uuid:'全部'},...that.$store.state.user.customer];
            //         that.customerList=that.$store.state.user.customer;
            //     }
            // },5000);
        },
        resetGroupD(){
            this.groupInfo={
                uuid:'',
                customer_name:'',
                customer_uuid:'',
                name:'',
                member_uuids:'',
                member_names:'',
                groupMember:[],
                bankMember:[],
                serMember:[],
                time:'',
            };
            this.targetKeys=[];
        },
        async delete(uuid){
            let res=await deleteEmergroup(uuid);
            let response=res.data;
            if(response.code===200){
                this.$Notice.error({
                    desc:'已删除'
                })
                this.searchtable();
            }else{
                this.$Notice.error({
                    desc:response.msg
                });
            }
        },
        async save(){
            
            if(this.groupInfo.customer_uuid==''){
                this.$Notice.error({
                    desc:'请选择客户'
                });
            }else if(this.groupInfo.name==''){
                this.$Notice.error({
                    desc:'请输入分组名称'
                });
            }else if(this.groupInfo.member_uuids.length<=0){
                this.$Notice.error({
                    desc:'请选择分组成员'
                });
            }else{
                let form=JSON.parse(JSON.stringify(this.groupInfo));
                let res=await saveEmerGroup(form);
                let response=res.data;
                if(response.code===200){
                    this.$Notice.success({
                        desc:'已保存'
                    });
                    this.getTable();
                    this.modal_group_info=false;
                }else{
                    this.$Notice.error({
                        desc:response.msg
                    });
                }
            }
            let that=this;
            this.saveloading=false;
            setTimeout(() => {
                that.saveloading=true;
            }, 500);
        },
        chosepeo(){
            this.groupInfo.groupMember=this.transferList.filter(item=>{
                if(this.targetKeys.includes(item.uuid)){
                    return item
                }
            });
            this.groupInfo.member_uuids=this.targetKeys.join(',');
            if(this.groupInfo.groupMember.length<=2){
                this.groupInfo.member_names= this.groupInfo.groupMember.map(item=>item.name).join(',')
            }else{
                this.groupInfo.member_names= this.groupInfo.groupMember[0].name+ this.groupInfo.groupMember[1].name+'等'+this.groupInfo.groupMember.length+'人'
            }
        },
        async getDetails(uuid){
            this.resetGroupD();
            let res=await getEmerGroupDetail(uuid);
            let response=res.data;
            if(response.code===200){
                let data=response.data;
                this.groupInfo={
                    uuid:data.uuid,
                    customer_name:data.partner_name,
                    customer_uuid:data.partner_uuid,
                    name:data.title,
                    member_uuids:data.customerList.map(item=>item.user_uuid).join(','),
                    member_names:'',
                    groupMember:data.customerList,
                    bankMember:data.customerList.filter(item=>{if(item.user_type=='01'){item.mobile=item.user_mobile.slice(7,11);return item} }),
                    serMember:data.customerList.filter(item=>{if(item.user_type=='02') {item.mobile=item.user_mobile.slice(7,11);return item} }),
                    time:data.created.slice(0,16)
                };
                this.targetKeys=data.customerList.map(item=>item.user_uuid);
                if(data.customerList.length<=2){
                    this.groupInfo.member_names=data.customerList.map(item=>item.user_nick).join(',')
                }else{
                    this.groupInfo.member_names=data.customerList[0].user_nick+data.customerList[1].user_nick+'等'+data.customerList.length+'人'
                }
                console.log(this.groupInfo);
            }else{
                this.$Notice.error({
                    desc:response.msg
                });
            }
        },
        change(value){
            this.getStaff(value);
            this.targetKeys=[];
            this.groupInfo.member_uuids='';
            this.groupInfo.member_names='';
            this.groupMember=[];
        },
        async getStaff(uuid){
            let res=await getAllPeoByCusUuid(uuid);
            let response=res.data;
            if(response.code==200){
                this.transferList=response.data.map(item=>{
                    item.key=item.uuid
                    return item
                })
            }else{
                this.$Notice.error({
                    desc:response.msg
                });
            }
        },
        searchtable(){
            this.formItem.pageNumber=1;
            this.getTable();
        },
        async getTable(){
            this.loading=true;
            let form=JSON.parse(JSON.stringify(this.formItem));
            for(let key in form){
                if(form[key]==='全部'){
                form[key]='';
                }
            }
            if(!!this.timeRange[0]&&this.timeRange.length>0){
                form.startTime=util.time1(this.timeRange[0]);
                form.endTime=util.time1(this.timeRange[1]);
            }
        
            let res=await getemgroupTable(form);
            let response=res.data;
            if(response.code===200){
                this.total=response.data.totalRow;
                this.data=response.data.list.map(item=>{
                    item.time=item.created.slice(0,16);
                    return item
                });
                this.loading=false;
            }else{
                this.$Notice.error({
                    desc:response.msg
                });
            }
        },
        pageSizeChange(size){
            //回到第一页
            this.formItem.pageNumber=1;
            this.formItem.pageSize=size;
            this.getTable();
        },
        pageChange(number){
            this.formItem.pageNumber=number;
            this.getTable();
        },
        handleClickAddForm(){
            this.resetGroupD();
            this.modal_group_info=true;
            this.groupTitle="新增分组";
            if(this.user_type=='01'){
                this.groupInfo.customer_uuid=this.userUuid;
            }
        },
        handleTransferChange(newTargetKeys){
            this.targetKeys=newTargetKeys
        },
        transRender(item){
            return `${item.name}(${item.mobile})---${item.instName}`
        },
    },
    created(){
        this.init();
        this.btnp=util.bpower(this,this.btn);
        this.getTable();
    },
}

</script>
<style lang='scss' >
</style>